<template>
	<view class="columnbox wdh-100 content">
		<view class="require-title">成为股东</view>
		<view class="info-box wdh-100 columnbox" style="padding-top: 20rpx;">
			<view @click="state=item.value" v-for="(item,index) in rule" :key='index' class="rowbox one-sel"
				:class="{'sel-type':state==item.value}">
				{{item.title}}
				<view class="check-box" v-if="state==item.value">
					<u-icon name="checkmark-circle-fill" size="32rpx" color="#4a9e5b"></u-icon>
				</view>
			</view>
		</view>
		<view class="require-title">股东提成</view>
		<view class="info-box wdh-100 columnbox">
			<view class="rowbox wdh-100 one-info spb info-line">
				<view>一级</view>
				<input type="digit" v-model="tichengyj" placeholder-class="noinfo" placeholder="点击输入" />
			</view>
			<!-- <view class="rowbox wdh-100 one-info spb">
				<view>二级</view>
				<input type="digit" v-model="tichengej" placeholder-class="noinfo" placeholder="点击输入" />
			</view> -->
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<view class="bottom-box wdh-100 rowbox">
			<view v-if="submitflag" class="one-btn rowbox submit-btn">保存</view>
			<view v-else @click="submitInfo" class="one-btn rowbox def-bgcol">保存</view>
		</view>

		<view class="weekNotice" v-if="showWeekNotice">
			<view class="">
				{{buymsg}}
			</view>
			<view class="btncont">
				<u-button v-if="!isIos" type="primary" size="mini" text="续费" @click="handleShowAndrRenw"></u-button>
				<u-button v-if="isIos" type="primary" size="mini" text="联系客服" @click="handleKefu"></u-button>
			</view>
		</view>
		<IosKefu :show="showIosKefu" :type="matype" @close="closeIosKefu"></IosKefu>
		<AndrTaocan :show="showAndrTaocan" :taocanid="8" @close="closeAndrTaocan" @refsh="handlerefsh"></AndrTaocan>
	</view>
</template>

<script>
	import IosKefu from '@/components/ioskefu.vue'
	import AndrTaocan from '@/components/andrtaocan.vue'
	export default {
		components: {
			IosKefu,
			AndrTaocan
		},
		data() {
			return {
				buymsg: '',
				showAndrTaocan: false,
				matype: '',
				showIosKefu: false,
				isIos: false,
				showWeekNotice: false,
				state: 1,
				rule: [{
						title: '自动成为基础股东',
						value: 1
					},
					{
						title: '购买一次成为基础股东',
						value: 2
					},
					{
						title: '手动添加成为基础股东',
						value: 3
					}
				],
				tichengyj: '',
				tichengej: '',
				submitflag: false
			};
		},
		onLoad() {
			this.getDetail()
		},
		onShow() {
			const info = wx.getSystemInfoSync()
			this.isIos = !(info.system.indexOf('Android') > -1)
			this.getStrorInfo()
		},
		methods: {
			handlerefsh() {
				this.getStrorInfo()
			},
			handleShowAndrRenw() {
				this.showAndrTaocan = true
			},
			closeAndrTaocan() {
				this.showAndrTaocan = false
			},
			handleKefu() {
				this.showIosKefu = true
				this.matype = 'gdimg'
			},
			closeIosKefu() {
				this.showIosKefu = false
			},
			getStrorInfo() {
				this.$req.post('/shanghu/userInfo', {
					uid: uni.getStorageSync('uid')
				}).then((res) => {
					let data = res.data.data
					this.buymsg = data.gdtitle
					if (data.gdweak == 2) {
						this.showWeekNotice = true
					}
					if (data.gdstrong === 2) {
						let flag = true
						if (uni.getStorageSync('gdbtaoendtime')) {
							var ctime = new Date().getTime()
							if (ctime > uni.getStorageSync('gdbtaoendtime')) {
								uni.removeStorageSync('gdbtaoendtime')
							} else {
								flag = false
							}
						}
						if (this.isIos) {
							this.matype = 'gdimg'
							this.showIosKefu = flag
						} else {
							this.showAndrTaocan = flag
						}

						if (!uni.getStorageSync('gdbtaoendtime')) {
							let endTime = new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 *
								60 *
								1000 - 1); // 当天23:59
							uni.setStorageSync('gdbtaoendtime', endTime)
						}
					}

				})
			},
			getDetail() {
				this.$req.post('/shanghu/chuji', {
					"shanghuid": uni.getStorageSync('userInfo').shanghuid,
				}).then(res => {
					let info = res.data.data
					this.tichengyj = info.tichengyj
					// this.tichengej = info.tichengej
					this.state = info.state
				})
			},
			submitInfo() {
				if (this.tichengyj === '') {
					uni.showToast({
						title: '请输入一级提成',
						icon: 'none'
					})
				} else {
					if (!this.submitflag) {
						this.submitflag = true
						uni.showLoading({
							title: '正在保存'
						})
						this.$req.post('/shanghu/chujiupdate', {
							"shanghuid": uni.getStorageSync('userInfo').shanghuid,
							"tichengyj": parseFloat(this.tichengyj),

							"state": parseInt(this.state)
						}).then(res => {
							uni.hideLoading()
							this.submitflag = false
							uni.showToast({
								title: '保存成功'
							})
							this.getDetail()
						})
					}
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.weekNotice {
		padding: 15rpx 30rpx;
		position: fixed;
		bottom: 130rpx;
		left: 0;
		z-index: 100;
		width: 100%;
		background-color: #fdf6ec;
		color: #f9ae3d;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.content {
		min-height: 100vh;
		background: #f6f6f6;
		justify-content: flex-start;
	}

	.info-box {
		padding: 0 20rpx;
		background: #fff;
	}

	.one-info {
		padding: 20rpx 0;
		border-radius: 10rpx;
		font-size: 28rpx;
		line-height: 70rpx;

		input {
			text-align: right;
			width: calc(100% - 200rpx);
			font-size: 28rpx;
		}
	}

	.require-title {
		font-size: 28rpx;
		width: 100%;
		padding: 32rpx 20rpx;
		box-sizing: border-box;
		font-weight: bold;
	}

	.info-line {
		border-bottom: #f1eff3 solid 1px;
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		background: #fff;
		padding: 20rpx 20rpx;
		padding-bottom: 40rpx;
		box-shadow: 0 0 4px 2px #eeecef;
	}

	.one-btn {
		width: 100%;
		font-size: 28rpx;
		height: 90rpx;
		border-radius: 20rpx;
		color: #fff;
	}

	.submit-btn {
		background: #eeecef;
		color: #606266;
	}

	.one-sel {
		background: #f5f7f9;
		color: #393b3d;
		width: 100%;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		justify-content: flex-start;
		border: #f5f7f9 solid 1px;
	}

	.sel-type {
		border: #57bd6a solid 1px;
		color: #000;
		background: rgba(#76bc7d, 0.2);
		position: relative;
	}

	.check-box {
		position: absolute;
		right: 20rpx;
	}
</style>